<template>
  <div class="pre-plan-table">
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      class="pre-plan-btn"
    >
      <div class="full-calendar-header">
        <div class="header-center">
          <span class="prev-month" @click.stop="goPrev"
            ><i class="el-icon-arrow-left"></i
          ></span>
          <span class="title">{{ title }}</span>
          <span class="next-month" @click.stop="goNext"
            ><i class="el-icon-arrow-right"></i
          ></span>
          <span class="current-month" v-if="!isCurrMonth" @click="goCurrMonth"
            >本月</span
          >
        </div>
      </div>
      <div></div>
      <el-radio-group
        v-model="search.cj"
        size="small"
        class="pre-radio"
        @change="getPlan"
      >
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button
          v-for="(item, index) in cjOption"
          :key="index"
          :label="item['key_value']"
        ></el-radio-button>
      </el-radio-group>
      <el-row type="flex">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="addPlan"
          >新增计划</el-button
        >
        <el-button size="small">导出订单</el-button>
      </el-row>
    </el-row>
    <div class="remind">
      共<span>1910吨</span>客户订单，<span>600吨</span>常规生产
    </div>
    <div class="common-table" ref="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :max-height="tableHeight"
        @row-click="rowClick"
      >
        <el-table-column
          prop="ddbh"
          label="订单编号"
          min-width="10%"
          align="center"
        />
        <el-table-column label="订单量(吨)" min-width="10%" align="center">
          <template slot-scope="{ row }">
            {{ row.ddlx + ' ' + row.zl }}
          </template>
        </el-table-column>
        <el-table-column
          prop="pz"
          label="品牌名称"
          min-width="20%"
          align="center"
        />
        <el-table-column
          prop="org"
          label="组织"
          min-width="10%"
          align="center"
        />
        <el-table-column
          prop="cj"
          label="车间"
          min-width="10%"
          align="center"
        />
        <el-table-column
          prop="jhkt"
          label="计划开台"
          min-width="10%"
          align="center"
        />
        <el-table-column
          prop="jhtt"
          label="计划停台"
          min-width="10%"
          align="center"
        />
        <el-table-column
          prop="ddjq"
          label="订单交期要求"
          min-width="10%"
          align="center"
        />

        <el-table-column prop="dcg" label="操作" width="100" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              icon="el-icon-edit-outline"
              size="small"
              style="padding:0"
              @click.stop="$emit('openAddOrderDialog', row)"
              >增加订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="common-pagination">
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        :page-size="search.size"
        :current-page="search.page + 1"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { getPrePlan } from '@/api/productionPlan';
export default {
  props: ['order'],
  data() {
    return {
      tableHeight: 200,
      currentMonth: moment().startOf('month'),
      actualMonth: moment().startOf('month'),
      search: {
        cj: '',
        query_time: moment()
          .startOf('month')
          .format('YYYY-MM'),
        page: 0,
        size: 10
      },
      total: 10,
      tableData: []
    };
  },
  computed: {
    cjOption() {
      return this.$store.getters.cjOption;
    },
    title() {
      if (!this.currentMonth) return;
      return this.currentMonth.locale('zh').format('YYYY[年] M[月]');
    },
    isCurrMonth() {
      let d1 = new Date(this.actualMonth._d).getTime();
      let d2 = new Date(this.currentMonth._d).getTime();
      return d1 == d2;
    }
  },
  created() {
    window.addEventListener('resize', this.getHeight);
  },
  mounted() {
    document.getElementsByClassName(
      'el-pagination__jump'
    )[0].childNodes[0].nodeValue = '跳至';
    this.$nextTick(() => {
      this.getHeight();
      this.getPlan();
    });
  },
  watch: {
    currentMonth: function(val) {
      if (val) {
        this.search.query_time = val.format('YYYY-MM');
        this.getPlan();
      }
    },
    order: function() {
      this.getPlan();
    }
  },
  methods: {
    async getPlan() {
      const { data } = await getPrePlan(this.search);
      this.tableData = data.dataList;
      this.total = data.total;
    },
    addPlan() {
      this.$emit('openAddPlanDialog');
    },
    getHeight() {
      this.tableHeight = this.$refs.table.offsetHeight;
    },
    rowClick(row) {
      this.$emit('openOrderDrawerDialog', row);
    },
    handleSizeChange(val) {
      this.search.page = 1;
      this.search.size = val;
      this.getPlan();
    },
    handleCurrentChange(val) {
      this.search.page = val;
      this.getPlan();
    },
    goPrev() {
      var newMonth = moment(this.currentMonth)
        .subtract(1, 'months')
        .startOf('month');
      this.currentMonth = newMonth;
    },
    goNext() {
      var newMonth = moment(this.currentMonth)
        .add(1, 'months')
        .startOf('month');
      this.currentMonth = newMonth;
    },
    goCurrMonth() {
      this.currentMonth = this.actualMonth;
    }
  }
};
</script>

<style lang="scss" scoped>
.pre-plan-table {
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  .pre-plan-btn {
    height: 60px;
  }
  .common-table {
    height: calc(100% - 150px);
  }
  .common-pagination .el-pagination {
    text-align: right;
  }
}
.full-calendar-header {
  position: absolute;
  top: 12px;
  left: 0;
  .header-center {
    text-align: center;
    .title {
      margin: 0 15px;
      color: #252f41;
      font-size: 14px;
      font-weight: 500;
    }
    .prev-month,
    .next-month,
    .current-month {
      display: inline-block;
      width: 32px;
      height: 32px;
      color: #606d86;
      line-height: 32px;
      font-size: 14px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #cfd4d8;
      cursor: pointer;
    }
    .current-month {
      width: 52px;
      font-size: 12px;
      color: #606d86;
      margin-left: 10px;
    }
  }
}
</style>
